<script setup>
  import { RouterLink, RouterView } from 'vue-router';
  import { reactive, computed, watch, ref, onMounted } from 'vue';
  import CardTodayHot from '../components/CardTodayHot.vue';
  import fetchHotData from '../js/fetchHotData';

  const todayHot = ref({
    baidu: {},
    weibo: {},
    toutiao: {},
    zhihu: {},
    tieba: {},
  });
  onMounted(() => {
    fetchHotData.getHot_Baidu(todayHot);
    fetchHotData.getHot_Weibo(todayHot);
    fetchHotData.getHot_Toutiao(todayHot);
    fetchHotData.getHot_Zhihu(todayHot);
    fetchHotData.getHot_Tieba(todayHot);
    // fetchHotData.getHot_Bilibili(todayHot);
  });
</script>

<template>
  <div>
    <!-- <div class="text_H2 margin_LT">今日热点</div> -->
    <div class="panel_N1">
      <CardTodayHot :hotData="todayHot.baidu" Title="百度实时热点"></CardTodayHot>
      <CardTodayHot :hotData="todayHot.weibo" Title="微博实时热点"></CardTodayHot>
      <CardTodayHot :hotData="todayHot.toutiao" Title="头条实时热点"></CardTodayHot>
      <CardTodayHot :hotData="todayHot.zhihu" Title="知乎实时热点" widthLevel="46vw"></CardTodayHot>
      <CardTodayHot :hotData="todayHot.tieba" Title="贴吧实时热点"></CardTodayHot>
      <!-- <CardTodayHot :hotData="todayHot.bilibili" Title="B站实时热点"></CardTodayHot> -->
    </div>
  </div>
</template>

<style scoped></style>
